<template>
    <div class="form-box">
        <h4>个人积分:{{this.jifen}}</h4>
        <h3>个人信息</h3>
        <el-form ref="form" :model="form" :rules='form.rules' label-width="80px">
            <el-form-item label="真实姓名" prop="name">
                <el-input v-model="form.name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="form.nickName" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入11位手机号"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="form.idcard" placeholder="请输入18位身份证号" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="生日">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="生日" v-model="form.birthday" style="width: 218%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%;">
                    <el-option label="男" value="man"></el-option>
                    <el-option label="女" value="wemen"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所在地区" >
                <el-input v-model="form.place" placeholder="请输入所在地区"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入个人邮箱" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">确认修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>



<script>
export default {
    name: "info",
    created() {
        //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("store") ) {
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        }
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        })
        this.getInfo();

    },
    data() {
        return {
            jifen:'',
            form: {
                name: '',
                nickName:'',
                phone: '',
                idcard:'',
                birthday:'',
                gender:'',
                place:'',
                email:'',
                rules: {
                    name: [
                        {required: true, message: '请输入真实姓名', trigger: 'blur'},
                    ],
                    nickname: [

                    ],
                    idcard: [
                        {required: true, message: '请输入身份证号', trigger: 'blur'},
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '手机号长度是 11 个字符', trigger: 'blur'},
                    ],
                    place: [
                        {required: true, message: '请输入所在地区', trigger: 'blur'},
                    ]
                }}
        }
    },
    methods:{
        getInfo(){
            var vm = this;
            this.axios({
                url: '/myapi/user/userMessage/updateuserMessage/'+vm.$store.state.id,
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    console.log(response.data);
                    //console.log(response.data.content.token);
                    vm.jifen = response.data.content.uintegral;
                    vm.form.name = response.data.content.uname;
                    vm.form.nickName = response.data.content.unickname;
                    vm.form.phone = response.data.content.uphone;
                    vm.form.idcard = response.data.content.uidcard;
                    vm.form.birthday = response.data.content.ubirthdat;
                    vm.form.gender = response.data.content.ugender;
                    vm.form.place = response.data.content.uplace;
                    vm.form.email = response.data.content.uemail;
                }
                else {
                    vm.$message.error('未知错误!');
                }
            });
        },
        submitForm(formName) {
            var vm = this;
            let id = vm.$store.state.id;
            console.log(id);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.axios({
                        url: '/myapi/user/userMessage/updateuM',
                        method: 'put',
                        //使用data是body传参，使用params是query传参
                        data: {
                            ubirthday: vm.form.birthday,
                            uemail: vm.form.email,
                            ugender: vm.form.gender,
                            uid: id,
                            uidcard: vm.form.idcard,
                            uname: vm.form.name,
                            unickname: vm.form.nickName,
                            uphone: vm.form.phone,
                            uplace: vm.form.place

                        }
                    }).then(function (response) {
                        if(response.data.success === true){
                            console.log(response.data);
                            vm.$message({
                                message: '修改成功!',
                                type: 'success'
                            });
                        }
                        else {
                            vm.$message.error('修改失败!');
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

            vm.getInfo();
        }
    }
}
</script>

<style scoped>
.form-box{
    width: 500px;
    height: 750px;
    margin: 50px auto;
    padding: 10px 50px 20px 20px;

}
.flex-btn{
    float: left;
}
</style>
